<template>
  <el-dialog
    v-model="dialogVisible"
    title="手动核销"
    width="430"
    class="qc-custom-dialog"
  >
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="80px"
      class="dialog-form-wrap"
    >
      <el-form-item label="关联订单" prop="orderId">
        <el-input
          v-model.trim="ruleForm.orderId"
          placeholder="请输入关联订单"
          maxlength="50"
          clearable
        />
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input
          v-model.trim="ruleForm.remark"
          placeholder="请输入备注信息，例如：用户优惠金额已线下补偿"
          maxlength="200"
          type="textarea"
          :rows="3"
          show-word-limit
          clearable
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="hide">取消</el-button>
        <el-button type="primary" v-btnAntiShake="onSubmit"> 保存 </el-button>
      </span>
    </template>
  </el-dialog>
</template>


<script lang="ts" setup name="dialog-write-off">
import type { FormInstance, FormRules } from 'element-plus';
import { writeOffEntity } from '@/service/apis/market';

const ruleFormRef = ref<FormInstance>();

let dialogVisible = ref(false);

let ruleForm = reactive({
  id: '',
  orderId: '',
  remark: '',
});

const rules = reactive<FormRules>({
  orderId: [{ required: true, message: '请输入关联订单', trigger: 'blur' }],
  // remark: [{ required: true, message: '请输入备注信息', trigger: 'blur' }],
});

const show = (row: any) => {
  ruleForm.id = row.id;
  ruleForm.orderId = '';
  ruleForm.remark = '';
  dialogVisible.value = true;
};
const hide = () => {
  dialogVisible.value = false;
};

const emit = defineEmits(['get-data']);
const onSubmit = async () => {
  if (!ruleFormRef.value) return;
  await ruleFormRef.value.validate((valid, fields) => {
    if (valid) {
      writeOffEntity(ruleForm).then((res: any) => {
        hide();
        emit('get-data');
      });
    } else {
      console.log('error submit!', fields);
    }
  });
};

defineExpose({
  show,
});
</script>
